<template>
  <div class="user-profile">
    <!-- 导航栏 -->
    <van-nav-bar
      class="page-nav-bar"
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
    />

    <!-- 在页面中添加input上传框 -->
    <!-- 由于这个input不好看我们可以设置hidden将它隐藏记住这种处理方式 -->
    <!-- 这里的hidden相当于display=none -->
    <!-- 给 input 上传框绑定 onChange 事件，触发事件处理程序 onFileChange;一旦有上传内容这个动作就触发 -->
    <input type="file" hidden ref="file" @change="onFileChange" />

    <!-- 个人信息 -->
    <!-- 点击头像显示上传获取input 对象 -->
    <!-- 点击后先获得上方的input对象;然后再手动调用它的click()方法；从而触发type="file"的input所具备的功能-->
    <van-cell title="头像" is-link @click="$refs.file.click()">
      <van-image class="avatar" fit="cover" round :src="user.photo" />
    </van-cell>
    <!-- 点击昵称，让弹出层显示 @click="isUpdateNameShow = true" -->
    <van-cell
      title="昵称"
      @click="isUpdateNameShow = true"
      :value="user.name"
      is-link
    />
    <!-- 点击性别，让弹出层显示@click="isUpdateGenderShow = true" -->
    <van-cell
      title="性别"
      :value="user.gender === 0 ? '男' : '女'"
      @click="isUpdateGenderShow = true"
      is-link
    />
    <!-- 点击性别，让弹出层显示 @click="isUpdateBirthdayShow = true" -->
    <van-cell
      title="生日"
      :value="user.birthday"
      is-link
      @click="isUpdateBirthdayShow = true"
    />

    <!-- 编辑昵称弹出层开始 -->
    <van-popup
      v-model="isUpdateNameShow"
      style="height: 100%"
      position="bottom"
    >
      <!-- 和上面弹层一样设置v-if="isUpdateNameShow"保证每次v-model="user.name"传过去的回填值都是实时-->
      <update-name
        v-if="isUpdateNameShow"
        v-model="user.name"
        @close="isUpdateNameShow = false"
      />
    </van-popup>
    <!-- 编辑昵称弹出层结束 -->

    <!-- 编辑性别弹出层开始 -->
    <van-popup v-model="isUpdateGenderShow" position="bottom">
      <!-- 修改性别组件开始 -->
      <!-- v-if="isUpdateGenderShow"保证每次都动态创建 -->
      <update-gender
        v-if="isUpdateGenderShow"
        v-model="user.gender"
        @close="isUpdateGenderShow = false"
      />
      <!-- 修改性别组件结束 -->
    </van-popup>
    <!-- 编辑性别弹出层结束 -->

    <!-- 编辑生日开始 -->
    <van-popup v-model="isUpdateBirthdayShow" position="bottom">
      <!-- 修改出生日期组件开始 -->
      <!-- v-if="isUpdateBirthdayShow"确保该组件动态跟随数据改变而更新(每次都会有一个重新``销毁``和``新建``的过程) -->
      <UpdateBirthday
        v-if="isUpdateBirthdayShow"
        v-model="user.birthday"
        @close="isUpdateBirthdayShow = false"
      ></UpdateBirthday>
      <!-- 修改出生日期组件结束 -->
    </van-popup>
    <!-- 编辑生日结束 -->

    <!-- 编辑头像开始 -->
    <van-popup
      v-model="isUpdatePhotoShow"
      position="bottom"
      style="height: 100%"
    >
      <!-- 编辑头像组件开始 -->
      <!-- v-if="isUpdatePhotoShow"确保该组件动态跟随数据改变而更新(每次都会有一个重新``销毁``和``新建``的过程) -->
      <!-- :img="img"父传子img二进制图片数据 -->
      <!-- 在父组件中接收 $emit 触发的事件;接收修改后返回的http地址 -->
      <UpdatePhoto
        v-if="isUpdatePhotoShow"
        :img="img"
        @close="isUpdatePhotoShow = false"
        @update-photo="user.photo = $event"
      ></UpdatePhoto>
      <!-- 编辑头像组件结束 -->
    </van-popup>
    <!-- 编辑头像结束 -->
  </div>
</template>

<script>
// 获取当前用户的个人资料接口
import { getUserProfile } from "@/api/user.js";
// 更改昵称组件
import UpdateName from "./components/update-name.vue";
// 修改性别组件
import UpdateGender from "./components/update-gender";
// 修改出生日期组件
import UpdateBirthday from "./components/update-birthday";
// 图片上传预览组件
import UpdatePhoto from "./components/update-photo";
export default {
  name: "UserIndex",
  data() {
    return {
      // 个人信息
      user: {},
      // 控制昵称的弹框
      isUpdateNameShow: false,
      // 控制性别的弹框
      isUpdateGenderShow: false,
      // 控制生日的弹框
      isUpdateBirthdayShow: false,
      // 控制修改头像的弹框
      isUpdatePhotoShow: false,
      // 将父组件中获取到的图片信息赋值给 data 中的 img 属性并传递到 update-photo.vue 组件中
      // 预览的图片
      img: null,
    };
  },
  created() {
    this.loadUserProfile();
  },
  methods: {
    async loadUserProfile() {
      try {
        const { data } = await getUserProfile();
        this.user = data.data;
        console.log("获取当前用户的个人资料", this.user);
      } catch (error) {
        this.$toast("获取数据失败");
      }
    },

    // onFileChange上传事件
    onFileChange() {
      // 获取文件对象
      const file = this.$refs.file.files[0];
      // 基于文章对象获取到 blob 数据
      // 将获取到的``盘符对象``转化成为``二进制对象``
      // 二级制对象可以进行串行化传递给后端
      // 注意该方法为同步方法；还有一个异步其他的异步方法
      // const data = window.URL.createObjectURL(file);
      // console.log(data);
      this.img = window.URL.createObjectURL(file);
      console.log(this.img);

      // ````在获取上传图片的内容后````(前提)，让弹框显示
      this.isUpdatePhotoShow = true;

      // file-input 如果选了同一个文件不会触发 change 事件
      // 解决办法就是每次使用完毕，把它的 value 清空
      // this.$refs.file.value = ""中的value是带盘符绝对地址的字符串;
      console.log(this.$refs.file.value);
      this.$refs.file.value = "";
    },
  },
  components: {
    UpdateName: UpdateName,
    UpdateGender: UpdateGender,
    // 修改出生日期组件
    UpdateBirthday: UpdateBirthday,
    // 上传预览组件
    UpdatePhoto: UpdatePhoto,
  },
};
</script>

<style scoped lang="less">
.user-profile {
  .avatar {
    width: 60px;
    height: 60px;
  }
}
</style>
